<template>
  <div class="home">
    <hr id="-1">
    <div style="position: fixed;top: 0;width: 100%;z-index: 1;">
      <div class="hometop">
        <div class="container">
          <div @click='push()' style="color: white;display: flex;align-content: center;padding: 8px;">
            <i class="el-icon-map-location" style="margin-right: 10px;font-size:25px;"></i>
            <h3 v-show="this.$store.state.school">{{this.$store.state.school}}</h3>
            <h3 v-show="!this.$store.state.school">请选择您所在城市与您的学校</h3>
          </div>
          <input type="text" class="search" placeholder="请输入关键字进行搜索">
        </div>
      </div>
      <div class="foodselect">
        <div class="selectlist" v-for="item,index in this.$store.state.foodlist">
          <a :href="'#'+Number(index-1)" style="text-decoration: none;color: black;">
            <div class="img">
              <img :src='"http://127.0.0.1:3000/"+item.foodstyleimg' alt="">
            </div>
            <font>{{item.style}}</font>
          </a>
        </div>
      </div>
    </div>
    <div style="margin-top: 200px;">
      <div class="foodlist"  v-for="item,index in this.$store.state.foodlist">
        <div class="snacks">
          <a :id="index"><h3>{{item.style}}</h3></a>
        </div>
        <div class="food container" v-for="food,index in item.list">
          <el-row>
            <el-col :span="7">
              <div class="foodimg">
                <div style="width: 100%;height: 100%;border-radius: 50%;overflow: hidden;">
                  <img :src='"http://127.0.0.1:3000/"+food.img' alt="">
                </div>
              </div>
            </el-col>
            <el-col :span="17">
              <div class="foodcontent"
                   @click="$router.push({path:'/foodlist',
                   query:{img:'http://127.0.0.1:3000/'+food.img,
                   title:food.title,
                   pingfen:food.pingfen,
                   yueshou:food.yueshou,
                   huodong:food.huodong,
                   peisong:food.peisongmoney}})">
                <div class="foodtitle">
                  <h3>{{food.title}}</h3>
                </div>
                <div class="foodcomments">
                  <font>评价 {{food.pingfen}}</font>
                  <font>月售{{food.yueshou}}</font>
                </div>
                <div class="foodprice">
                  <font>起送￥{{food.qisong}}</font>
                  <font>配送费￥{{food.peisongmoney}}</font>
                </div>
                <div class="foodactive">
                  <font v-for="active,index in food.huodong">{{active}}</font>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
export default {
  name: 'home',
  data(){
    return{

    }
  },
  methods:{
    push(){
      if(this.$store.state.phone){
        this.$router.push('/newaddress')
      }else{
        this.$router.push('/login')
      }

    }
  }
}
</script>

<style scoped>
  .home{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
  }
  .hometop{
    padding: 10px;
    background-color:rgb(0,144,255);
  }
  .container{
    width: 90%;
    margin: auto;
  }
  .search{
    width: 100%;
    height: 33px;
    text-align: center;
    outline: none;
    border: none;
    border-radius: 20px;
  }
  .foodselect{
    display: flex;
    flex-wrap:wrap;
    background: rgb(255,255,255);
  }
  .selectlist{
    margin: 10px;
    width: 50px;
    height: 50px;
    text-align: center;
  }
  .img{
    width: 70%;
    height: 70%;
    margin: 0 auto 4px auto;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .foodlist{
    margin-bottom: 50px
  }
  .snacks{
    margin: 5px 0 0 0;
    text-align: center;
  }
  .snacks a{
    text-decoration: none;
    color: black;
  }
  #snacks:before,#snacks:after{
    content:'-';
  }

.food{
  padding: 20px 0;
}
.foodtitle{
  font-size: 13px;
}
  .foodimg{
    width: 80px;
    height: 80px;
    margin-top: 20px;
    border: 1px solid darkgray;
    border-radius: 5px;
  }

  .foodtitle,.foodcomments,.foodprice,.foodactive{
    padding: 5px 0;
  }
  .foodcomments font:first-of-type,.foodprice font:first-of-type{
    display: inline-block;
    margin-right:10px;
  }
  .foodcomments font:first-of-type{
    color: orange;
  }
  .foodcomments,.foodprice{
    font-size: 13px;
  }
  .foodactive font{
    display: inline-block;
    margin-right: 10px;
    color: orangered;
    border: 1px solid orangered;
    font-size: 12px;
  }
  .foodactive font:first-of-type{
    background:orangered;
    color: white;
  }
</style>